FlyTalk.views.MapTab = Ext.extend(Ext.Panel, {
	fullscreen: true,
	title: 'Map',
	layout: 'vbox',
	
	    				
    initComponent: function () {
// tool bar section
        this.backButton = new Ext.Button({
		
			iconCls: 'home',
			iconMask: true,
			handler: this.backButtonTap,
			scope: this
		});
        
        this.filterButton = new Ext.Button({
        	iconMask: true, 
        	ui: 'plain', 
        	iconCls: 'add',
			handler: this.filterButtonTap,
			scope: this
		});
        
		this.toolbar = new Ext.Toolbar({
				title: 'Itin/Map',
				doc: 'top',
				layout: 'hbox',
				hidden: 'true',
				items: [
					this.backButton,
					{xtype: 'spacer'},
					this.filterButton,
				]
		});
		
		this.dockedItems = [this.toolbar];
		
// filter menu
		// template for menu button
		var menuButtonTpl = new Ext.XTemplate(
			'<img src={src} alt="" width="48" height="48" />',
			'<p style="font-size:small">{btnText}</p>'
		);
				
		//restaurant filter
		this.filterButton1 = new Ext.Button({
			data:{
				src: "images/restaurants2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.filterButton1Tap,
			scope: this
		});
		
		//renntal Car
		this.filterButton2 = new Ext.Button({
			data:{
				src: "images/rentalCar2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.filterButton2Tap,
			scope: this
		});
		
		//play areas
		this.filterButton3 = new Ext.Button({
			data:{
				src: "images/playground2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.filterButton3Tap,
			scope: this
		});
		
		//outlets
		this.filterButton4 = new Ext.Button({
			data:{
				src: "images/outlets2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.filterButton4Tap,
			scope: this
		});
		
		//shops
		this.filterButton5 = new Ext.Button({
			data:{
				src: "images/shops2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.filterButton5Tap,
			scope: this
		});
		
		//Loos
		this.filterButton6 = new Ext.Button({
			data:{
				src: "images/wc2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			tpl:menuButtonTpl,
			flex:1,
			handler: this.filterButton6Tap,
			scope: this
		});
		
		// top row for overlay menu
		this.firstPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
		//	html: 'top',
			//flex:1,
			layout: 'hbox',
			items: [this.filterButton1, this.filterButton2, this.filterButton3],
		});
		
		// 2nd row for overlay menu
		this.secondPanel = new Ext.Panel({
			scroll: false,
            fullscreen: false,
			baseCls: "menu",
			pack: 'start',
			//align: 'stretch',
			//flex:1,
			//html: 'mid',
			layout: 'hbox',
		    items: [this.filterButton4, this.filterButton5, this.filterButton6],
		});
		
		this.overlayTb = new Ext.Toolbar({
            dock: 'top',
            title: 'Map Filters',
        });
		
		this.overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: true,
			layout:'fit',
			//width: 200,
            //height: 180,
		    hideMode:'close',
		    hideOnMaskTap:'false',
		    layout: 'vbox',
		    scroll:'vertical',
			items: [
			        this.firstPanel,
			        this.secondPanel,
             ], // end of items
           //  dockedItems: [this.overlayTb],
        });

// itin panel (shows the most important detail for each touchpoint

		this.ItinPanel = new Ext.Panel({
		//	layout:'fit',
            html: 'Check-in, Flight TAP001, wait time 5mins',
		});
		
		//specify the image buttons here
		//template for image buttons
		
		//lets hide this for now
		var mapButtonTpl = new Ext.XTemplate(
				'<img src={src} alt="" />',
				'<p style="font-size:small">{btnText}</p>'
			);
		
		this.image1 = new Ext.Button({
			data:{
				src: "images/schipol1.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="99"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
			//onItemDisclosure: true,	
			handler: function(){
				FlyTalk.views.ItinView.onDisclose('checkin');
				//FlyTalk.views.MapTab.onDisclose(FlyTalk.views.mainView.setActiveItem(FlyTalk.views.ItinDetailView));
			},
			scope: this
		});
		
		this.image2 = new Ext.Button({
			data:{
				src: "images/schipol2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			handler: function(){
			//	alert(FlyTalk.views.ItinView.toolbar.title);
				//FlyTalk.views.ItinView
				FlyTalk.views.ItinView.onDisclose('security');
			},
			//flex:1,
			//handler: this.tapImage2,
			scope: this,
		});
		
			
		this.BodyPanel = new Ext.Panel({
			//autoLoad: true,
			scroll: true,
            fullscreen: false,
            layout: 'hbox',
          	//flex:1,
			items: [this.image1, this.image2],
		});
		
		this.items= [
		             //this.ItinPanel, 
		             this.BodyPanel];
			
		FlyTalk.views.MapTab.superclass.initComponent.call(this);
		 
    },
    
    backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },
    
          
            
    filterButtonTap: function () { // to open the image overlay 
    	this.overlay.setCentered(true);
    	this.overlay.show();
    },
        
	filterButton1Tap: function () { // to open the image overlay 
		this.overlay.hide();
		Ext.dispatch({
			controller: FlyTalk.controllers.ftController,
			action: 'openRestaurant'
		});
	}
   
});